<template>
  <div class="side-list content">
    <template v-for="(subList, index) in groupList">
      <card-list :data="[subList[0]]" :key="`card-${index}`" />
      <TextCardList :data="subList.slice(1)" :key="`card-text-${index}`" />
    </template>
  </div>
</template>

<script>
  import CardList from '@/components/list/CardList'
  import TextCardList from '@/components/list/TextCardList'

  export default {
    name: "sideList",
    props: {
      data: {
        type: Array,
        default: function () {
          return [];
        }
      },
      spiltNum: {
        type: Number,
        default: 5
      }
    },
    computed: {
      groupList(){
        const vm = this;
        let result = [];
        let subList = [];
        let data = vm.data;
        for (let i = 0; i < data.length; i++) {
          if (i % vm.spiltNum === 0) {
            subList = [];
            result.push(subList);
          }
          subList.push(data[i]);
        }
        return result;
      }
    },
    components: {
      CardList,
      TextCardList
    }
  }
</script>

<style scoped>
  .content {
    /*margin-top: 5px;*/
  }
  .side-list /deep/ a{
    display: inline-block;
    line-height: 30px;
    width: 100%;
    font-size: 14px;
  }
  .side-list /deep/ li {
    width: 100%;
  }
  .card-list, .text-card-list {
    margin-bottom: 24px;
  }
  .card-list /deep/ img {
    width: 100%;
    height: auto;
  }
  .card-list /deep/ .imgAlt{
    margin-top: 5px;
  }
</style>
